/* 
    Document   : Default
    Created on : 23/08/2009, 20:58:27
    Author     : leandro
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

.errorMessages
{
    float:left;
    border: 1px solid red;
    background-color:rgb(230, 230, 200);
    padding:1em;
    color:red;
}
.statusMessage
{
    border: 1px solid black;
    padding:3px;
    background:#546775 url(button1a.gif) no-repeat right center;
    color:#000;
    font: 12px arial, verdana, sans-serif;
}

.resultsGrid
{
    border:1px solid black;
    padding:1em;
}

.resultsRow
{
    border:1px solid black;
    background-color:rgb(240, 240, 200);
}
.header
{
    width:100%;
    background-color:#545454;
    border: 1px solid black;
}
.content
{
    background-color:#545454;
    padding-left:4px;
    margin-top: 40px;
    width:100%;
}

.footer
{
    width:100%;
    background-color:rgb(255, 230, 200);
    border: 1px solid black;
}

.requiredElement
{
    color:red;
}
select.requiredElement
{
    color:black
}
input.requiredElement
{
    color:black
}
input.disabledElement
{
    color:gray
}
.optionalElement
{}

.grayedElement
{
    color:silver;
    background-color:gray;
}

.tablaPeriodica
{
    border-style:none;
    clear: left;
}

.tablaPeriodica tr td
{
    border: solid 1px;
    overflow:hidden;
    height:60px;
    width:60px;
}

.tablaPeriodica tr td.empty
{
    /*border-style:none;*/
}

.tablaPeriodica tr td.periodoHeader
{
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 24px;
    text-align: center;
    width:20px;
}

.tablaPeriodica tr td.grupoHeader
{
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-weight: bold;
    text-align: center;
    vertical-align:bottom;
    border-style:none;
}

.NoMetales
{
    background:rgb(255, 200, 200);
}
.Metales
{
    background:rgb(100, 255, 200);
}
.Metaloides
{
    background:rgb(255, 250, 190);
}
.GasesNobles
{
    background:rgb(220, 240, 255);
}

.numeroAtomico
{
    font-size: 10px;
    font-family: Arial,Helvetica,sans-serif;
    text-align:left;
    display:block;
}
.simbolo
{
    text-align:center;
    font-family: 'Times New Roman',Times,serif;
    font-size: 20px;
    font-weight: bold;
    display:block;
}
.nombre
{
    text-align:center;
    font-family: 'Times New Roman',Times,serif;
    font-size: 12px;
    display:block;
}

a.nombre
{
    text-align:center;
    font-family: 'Times New Roman',Times,serif;
    font-size: 12px;
    display:block;
    color: black;
    text-decoration:none;
}


.informacionElemento
{

    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 14px;
    color: white;
}


/* Detalles del elemento */
.detalles-elemento img
{
    float: right;
    max-height: 200px;
    max-width: 200px;
    margin: 20px;
}

dl {
	line-height: 2em;
	margin: 0em 0em;
	width: 60%;
}
dt {
	font-weight: bold;
	padding-left: 4px;
	vertical-align: top;
}
dd {
	margin-left: 10em;
	margin-top: -2em;
	vertical-align: top;
}



/* menues */

.menu {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    list-style-position: outside;
    list-style-type: none;
    list-style-image: none;
}

#familias li {
    float: left;
    margin-left: 15px;
    margin-top: 76px;
}